<template>
  <div class="zh-home">
    <div class="zh-home-head zh-header">
      <div class="zh-home-h-l">
        <div class="zh-home-h-logo">
          <img :src="logoUrl" @click="pageHome()" />
        </div>
      </div>
      <div class="zh-home-h-r">
        <div class="zh-h-right fr clear">
          <div class="fl" v-popover:popover>
            <span class="zh-head-portrait">
              <img
                :src="BASE_URL + $store.getters.userInfo.avatar_path"
                alt=""
              />
            </span>
            <span class="zh-user-info">
              <span>{{ $store.getters.userInfo.number }}</span>
              <span>{{ $store.getters.userInfo.name }}</span>
            </span>
            <el-popover
              ref="popover"
              placement="bottom"
              v-model="visible"
              trigger="hover"
              popper-class="zh-drop"
            >
              <ul class="zh-drop-down">
                <li @click="pageHome()">网站首页</li>
                <li v-show="isShowPersonal" @click="backPersonal()">
                  个人中心
                </li>
                <li @click="loginOut()">退出账号</li>
              </ul>
            </el-popover>
          </div>
        </div>
      </div>
    </div>

    <div class="zh-h-all">
      <div class="zh-h-nav">
        <span
          :class="this.currentView === 'first' ? 'is-active' : ''"
          @click="toggleTabs(first)"
          >管理模块</span
        >
        <span
          :class="this.currentView === 'second' ? 'is-active' : ''"
          @click="toggleTabs(second)"
          >数据监控</span
        >
      </div>
      <div class="zh-h-manage">
        <!-- :is 是不同组件之间进行动态切换 -->
        <first :is="currentView"></first>
      </div>
    </div>
    <el-footer style="position:fixed;bottom:0;left:0;text-align:center;">{{
      copyrightInfo
    }}</el-footer>
  </div>
</template>
<script>
import first from "@/components/public/module-management";
import second from "@/components/public/monitor";

export default {
  data() {
    return {
      isShowPersonal: false,
      loading: {
        status: false,
        txt: "正在退出系统...",
        full: false
      },
      first: "first", //导航栏1
      second: "second", //导航栏2
      currentView: "first", //默认选中first子组件
      left: true,
      right: true,
      visible: false,
      logoData: [],
      logoUrl: ""
    };
  },
  created() {
    this.getLogo();

    if (!sessionStorage.getItem("CopyrightInfo")) {
      this.getCopyrightInfo();
    } else {
      this.$store.commit(
        "SET_COPYRIGHTiNFO",
        sessionStorage.getItem("CopyrightInfo")
      );
    }
  },
  mounted() {
    this.isShowPersonal =
      sessionStorage.getItem("CheckSchoolAppCode") ===
      JSON.parse(sessionStorage.getItem("user_info_str")).app_code;
  },
  computed: {
    copyrightInfo() {
      return deep_clone(this.$store.getters.copyrightInfo);
    }
  },
  methods: {
    // 底部------------------------------------------------------------------------
    /**
     * 获取版权信息
     * @modify 2019-5-10
     */
    getCopyrightInfo() {
      let success = res => {
        if (!is_empty(res.data.info.info_copyright)) {
          sessionStorage.setItem("CopyrightInfo", res.data.info.info_copyright);
          this.$store.commit("SET_COPYRIGHTiNFO", res.data.info.info_copyright);
        }
      };

      this.$ajax.get("api/setting/page_foot", { func: { success: success } });
    },
    // 底部------------------------------------------------------------------------

    getLogo() {
      this.loading.status = true;
      // 重写成功回调
      let success = res => {
        this.loading.status = false;
        console.log(res.data, 127847);
        this.logoData = deep_clone(res.data);
        this.logoUrl = this.BASE_URL + this.logoData[0].m_logo;
        console.log(this.logoUrl);
      };

      let fail = data => {
        this.loading.status = false;
        this.$message.error(data.msg);
      };

      this.$ajax.get("api/system/get_logo", {
        params: {},
        func: { success: success, fail: fail }
      });
    },
    toggleTabs(tabText) {
      this.currentView = tabText;
    },
    pageHome() {
      window.location.href = sessionStorage.getItem("host_addr");
    },
    backPersonal() {
      let manage_url = sessionStorage.getItem("host_addr");
      let redirect_params = sessionStorage.getItem("redirect_params");
      window.location.href = manage_url + "/personal" + redirect_params;
    },
    loginOut() {
      this.$store.commit("SET_OUTLOGIN", true);

      // this.loading.txt = '正在退出系统...';
      // this.loading.full = true;

      // if (JSON.parse(sessionStorage.getItem('user_info_str')).logout_url) {
      //     this.loading.txt = '退出成功...';
      //     this.loading.full = true;
      //     let user_info_str = JSON.parse(sessionStorage.getItem('user_info_str'));

      //     setTimeout(() => {
      //         sessionStorage.clear();
      //         // localStorage.clear();
      //         window.location.href = user_info_str.logout_url;
      //     }, 500)
      // } else {
      //     let success = ( data => {
      //         this.loading.txt = '退出成功...';
      //         this.loading.full = true;
      //         let host_addr = sessionStorage.getItem('host_addr');

      //         setTimeout(() => {
      //             sessionStorage.clear();
      //             // localStorage.clear();
      //             window.location.href = host_addr;
      //         }, 1000)
      //     });
      //     let fail = ( data => {
      //         this.$message.error(data.msg)
      //         this.loading.txt = data.msg;
      //         this.loading.full = true

      //         setTimeout(() => {
      //             this.loading.status =  false;
      //             this.loading.full = false
      //         }, 1000)
      //     });
      //     this.$ajax.delete('api/login/new_login',{params:{},func:{success:success,fail:fail}})
      // }
    }
  },
  components: {
    first,
    second
  }
};

console.info("=sssssss");
</script>
<style lang="scss">
.zh-home {
  .zh-home-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 60px;
    line-height: 60px;
    padding: 0 30px;
    background: #fff;
    z-index: 99;
    .zh-home-h-l {
      flex: 1;
      .zh-home-h-logo {
        img {
          vertical-align: middle;
          cursor: pointer;
        }
      }
    }
    .zh-home-h-r {
      flex: 1;
      text-align: right;
      .zh-user-info {
        text-align: left;
      }
    }
  }

  .zh-h-all {
    position: relative;
    width: 100%;
    height: 100%;
    background: url("../../../static/image/main_bgc.png") no-repeat;
  }
  .zh-h-nav {
    padding: 44px 0 66px;
    text-align: center;
    font-size: 0;
    span {
      font-size: 14px;
      display: inline-block;
      background-color: #fff;
      height: 42px;
      line-height: 42px;
      padding: 0 24px;
      // opacity: 0.5;
      cursor: pointer;
    }
    .is-active {
      // opacity: 1;
      background-color: deepskyblue;
      color: #fff;
      // border-bottom: 2px solid #fff;
    }
  }
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;
    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>
